<template>
    <div class="register">
        <div class="registerCon">
            <div class="registerIcon">
                <i class="iconfont icon-shoujihaoma"></i>
            </div>
            <div class="registerInput">
                <input v-model.trim="registerData.mobileNo" type="number" placeholder="请输入手机号码">
            </div>
        </div>
        <div class="registerCon">
            <div class="registerIcon">
                <i class="iconfont icon-zhucexingming"></i>
            </div>
            <div class="registerInput">
                <input v-model.trim="registerData.userName" type="text" placeholder="请输入您的姓名">
            </div>
        </div>
        <div class="registerCon">
            <div class="registerIcon">
                <i class="iconfont icon-zhucedizhi"></i>
            </div>
            <div class="registerInput">
                <input style="width:60%" v-model.trim="registerData.verifyCode" type="number" placeholder="请输入收到的验证码">
                <mt-button style="width:40%;font-size:100%;" type="primary" :disabled="this.disabled" @click="getCode">{{ time>=30 ? '点击获取验证码' : `${this.time}s`}}</mt-button>
            </div>
        </div>
        <div class="registerCon registerCon1">
            <button :class="{active: registerData.accountType == 1}" @click="selectBtn($event)" value="1">家庭版</button>
            <button :class="{active: registerData.accountType == 2}" @click="selectBtn($event)" value="2">企业版</button>
        </div>
        <div class="registerBtn">
            <button @click="register">立即注册</button>
        </div>
    </div>
</template>
<script>
import { MessageBox } from 'mint-ui';
import {mapActions, mapState} from 'vuex'
export default {
    created(){
        this.getCommonUserInfo();
    },
    data(){
        return {
            disabled:false,
            timer:null,
            time:30,
        }
    },
    computed:{
        ...mapState({
            registerData:state => state.personModules.registerData
        })
    },
    methods:{
        ...mapActions({
            userRegister:'personModules/userRegister',
            getVerifyCode:'personModules/getVerifyCode',
            getCommonUserInfo:'personModules/getCommonUserInfo'
        }),
        getCode(){
            if(this.registerData.mobileNo.length != 11 ){
                MessageBox('错误','请输入正确的手机号');
                return;
            }
            this.disabled = true;
            this.timer = setInterval(()=>{
                if(this.time <= 30 && this.time >=2){
                    this.time --;
                }else{
                    this.time = 30;
                    clearInterval(this.timer);
                    this.disabled = false;
                }
            },1000);
            let params =this.registerData.mobileNo;
            this.getVerifyCode({mobileNo:params,codeType:3});
        },
        register(){
            let params = this.registerData;
            if(params.mobileNo.length != 11){ MessageBox('错误','请输入正确的手机号');return;}
            if(params.userName == '' || params.userName.length > 16){ MessageBox('错误','姓名格式不正确');return;}
            if(params.verifyCode.length != 6){ MessageBox('错误','验证码错误');return;}
            this.userRegister(params);
        },
        selectBtn(e){
            this.registerData.accountType = e.target.value;
        }
    },
    beforeDestroy() {
        if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
            clearInterval(this.timer); //关闭
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../../assets/style/register.scss";
.registerCon.registerCon1 button.active{
    background-color: #1b85e9;
    color: #fff;
}
</style>

